<template>
  <div class="department-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- card title -->
        <div slot="header">
          <!-- 用一个行列布局 -->
          <el-row>
            <el-col :span="20">
              <span>宇宙大公司</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <el-dropdown-menu slot="dropdown">
                      <!-- 点击弹出层位置 -->
                      <el-dropdown-item
                        @click.native="adddept()"
                      >添加子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- card body -->
        <div>
          <!-- 树形结构 -->
          <!-- 展示公司下的部门 -->
          <el-tree :data="list" :props="defaultProps">
            <!-- 自定义部门树内容显示 -->
            <template #default="{ data }">
              <el-row style="width: 100%">
                <el-col
                  :span="20"
                  :offset="0"
                ><span>{{ data.name }}</span></el-col>
                <el-col :span="4" :offset="0">
                  <el-row type="flex" justify="end">
                    <el-col>{{ data.manager }}</el-col>
                    <el-col>
                      <!-- 下拉菜单 -->
                      <el-dropdown>
                        <span>操作<i class="el-icon-arrow-down" /> </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            @click.native="adddept(data)"
                          >添加子部门</el-dropdown-item>
                          <el-dropdown-item
                            @click.native="editdept(data)"
                          >编辑部分</el-dropdown-item>
                          <el-dropdown-item
                            @click.native="delPart(data)"
                          >删除部分</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-tree>
        </div>
      </el-card>
    </div>
    <!-- 弹出层 -->
    <add-dept
      ref="editdept"
      :show-dialog="showDialog"
      :curren-data="currenData"
      :tree-list="treeList"
      @close-dialog="closeDialog"
      @update="getDepartmentsList"
    ></add-dept>
  </div>
</template>

<script>
import { getDepartmentsAPI, delDepartment } from '@/api/department.js'
import { tranListToTreeData } from '@/utils/index.js'
import AddDept from '@/views/departments/components/add-dept'
export default {
  components: {
    AddDept
  },
  data () {
    return {
      currenData: null, // 当前操作的部门数据
      showDialog: false, // 控制弹出层的显示和隐藏
      list: [], // 处理过的的树形结构
      treeList: [], // 没有处理过的树形结构
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created () {
    this.getDepartmentsList()
  },
  methods: {
    // 获取部门列表
    async getDepartmentsList () {
      const data = await getDepartmentsAPI()
      console.table(data.depts)
      this.treeList = data.depts
      this.list = tranListToTreeData(data.depts)
    },
    // 删除部门
    delPart (data) {
      console.log(data)

      this.$confirm('确认删除此节点', '提示').then(async () => {
        if (data.children && data.children.length) { return this.$message.error('不能直接删除父节点') }
        // 调用删除API
        await delDepartment(data.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 删除成功后再重新获取部门列表
        this.getDepartmentsList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加部门
    adddept (data) {
      // 点击弹出弹出层
      this.showDialog = true
      this.currenData = data
      console.log(this.currenData)
    },
    // 关闭弹出层,通过子组件传过来的值来进行操作
    closeDialog (val) {
      this.showDialog = val
    },
    // 点击编辑部门 对数据进行回填
    editdept (data) {
      this.showDialog = true
      this.currenData = data
      // console.log(this.$refs.editdept)
      // console.log(data.id)
      this.$refs.editdept.editDepartment(data.id)
    }
  }

}

</script>

<style lang="scss" scoped>
::v-deep .el-tree-node__content {
  margin: 10px;
}
</style>
